{% extends "_layouts/examples.html" %}
{% block title %}Logo block / Misaligned logos{% endblock %}

{% block standalone_css %}patterns_logo-section{% endblock %}

{% block content %}
<div class="u-fixed-width">
  <div class="p-logo-section has-misaligned-images">
    <h2 class="u-align--center u-sv3">Cloud Service Providers</h2>
    <div class="p-logo-section__items">
      <div class="p-logo-section__item">
        <div class=" lazyloaded" data-noscript="">
          <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_144,h_144/https://assets.ubuntu.com/v1/1ccd490e-equinix-white-space.svg" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_288,h_288/https://assets.ubuntu.com/v1/1ccd490e-equinix-white-space.svg 2x" alt="Equinix" width="144" height="144" loading="lazy" class="p-logo-section__logo">
        </div>
      </div>
      <div class="p-logo-section__item">
        <div class=" lazyloaded" data-noscript="">
          <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_146,h_144/https://assets.ubuntu.com/v1/57e46e3b-google-logo.svg" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_292,h_288/https://assets.ubuntu.com/v1/57e46e3b-google-logo.svg 2x" alt="Google cloud platform" width="146" height="144" loading="lazy">
        </div>
      </div>
      <div class="p-logo-section__item">
        <div class=" lazyloaded" data-noscript="">
          <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_146,h_144/https://assets.ubuntu.com/v1/538fe31a-MS+Azure-white-space.svg" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_292,h_288/https://assets.ubuntu.com/v1/538fe31a-MS+Azure-white-space.svg 2x" alt="Microsoft azure logo" width="146" height="144" loading="lazy" class="p-logo-section__logo">
        </div>
      </div>
      <div class="p-logo-section__item">
        <div class=" lazyloaded" data-noscript="">
          <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_145,h_145/https://assets.ubuntu.com/v1/093f3200-aws-logo-white-spae.svg" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_290,h_290/https://assets.ubuntu.com/v1/093f3200-aws-logo-white-spae.svg 2x" alt="AWS logo" width="145" height="145" loading="lazy" class="p-logo-section__logo">
        </div>
      </div>
      <div class="p-logo-section__item">
        <div class=" lazyloaded" data-noscript="">
          <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_350,h_165/https://assets.ubuntu.com/v1/debf01e1-Oracle-Cloud-Logo-350.png" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_700,h_330/https://assets.ubuntu.com/v1/debf01e1-Oracle-Cloud-Logo-350.png 2x" alt="Oracle cloud" width="350" height="165" loading="lazy" class="p-logo-section__logo">
        </div>
      </div>
    </div>
  </div>

  <div class="p-logo-section has-misaligned-images">
    <h2 class="p-logo-section__title u-align--center" style="max-width: none">Read about the companies using app stores for IoT</h2>
    <div class="p-logo-section__items">
      <div class="p-logo-section__item">
        <a href="#">
          <div class=" lazyloaded" data-noscript="">
            <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_113,h_71/https://assets.ubuntu.com/v1/6d588a1f-RigadoFullColorVert-800px.png" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_226,h_142/https://assets.ubuntu.com/v1/6d588a1f-RigadoFullColorVert-800px.png 2x" alt="" width="113" height="71" loading="lazy" class="p-logo-section__logo">
          </div>
        </a>
      </div>
      <div class="p-logo-section__item">
        <a href="#">
          <div class=" lazyloaded" data-noscript="">
            <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_162,h_29/https://assets.ubuntu.com/v1/5c2662f7-dellemc.png" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_324,h_58/https://assets.ubuntu.com/v1/5c2662f7-dellemc.png 2x" alt="" width="162" height="29" loading="lazy" class="p-logo-section__logo">
          </div>
        </a>
      </div>
      <div class="p-logo-section__item">
        <a href="#">
          <div class=" lazyloaded" data-noscript="">
            <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_131,h_53/https://assets.ubuntu.com/v1/156ddbf8-rexroth_logo.svg" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_262,h_106/https://assets.ubuntu.com/v1/156ddbf8-rexroth_logo.svg 2x" alt="" width="131" height="53" loading="lazy">
          </div>
        </a>
      </div>
      <div class="p-logo-section__item">
        <a href="#">
          <div class=" lazyloaded" data-noscript="">
            <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_158,h_99/https://assets.ubuntu.com/v1/c5ee407e-cyberdyne.png" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_316,h_198/https://assets.ubuntu.com/v1/c5ee407e-cyberdyne.png 2x" alt="" width="158" height="99" loading="lazy" class="p-logo-section__logo">
          </div>
        </a>
      </div>
      <div class="p-logo-section__item">
        <a href="#">
          <div class=" lazyloaded" data-noscript="">
            <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_162,h_69/https://assets.ubuntu.com/v1/5651e32d-lime.png" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_324,h_138/https://assets.ubuntu.com/v1/5651e32d-lime.png 2x" alt="" width="162" height="69" loading="lazy" class="p-logo-section__logo">
          </div>
        </a>
      </div>
      <div class="p-logo-section__item">
        <a href="#">
          <div class=" lazyloaded" data-noscript="">
            <img src="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_162,h_36/https://assets.ubuntu.com/v1/84d82478-domotz.svg" srcset="https://res.cloudinary.com/canonical/image/fetch/f_auto,q_auto,fl_sanitize,w_324,h_72/https://assets.ubuntu.com/v1/84d82478-domotz.svg 2x" alt="" width="162" height="36" loading="lazy" class="p-logo-section__logo">
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}
